{% extends "pages/abstract/_layout.html" %}
{% block css %}
<!-- Plugins -->
<link rel="stylesheet" href="/templates/static/global/vendor/chartist/chartist.css">
<link rel="stylesheet" href="/templates/static/global/vendor/chartist-plugin-tooltip/chartist-plugin-tooltip.css">
<!-- Page -->
<link rel="stylesheet" href="/templates/static/css/analysis.css">
{% endblock %}
{% block page %}
<!-- Page -->
<div class="page">
  <div class="page-header">
    <h6 class="page-title">综合分析</h6>
  </div>
  <div class="page-content container-fluid">
    <div class="row" data-plugin="matchHeight" data-by-row="true">
      <div class="col-xxl-6 col-lg-12">
        <div class="card card-shadow card-responsive" id="consumeMoodLineChart">
          <div class="card-block p-30">
            <div class="row pb-30" style="height:calc(100% - 250px);">
              <div class="col-sm-8">
                <div class="counter counter-md text-left">
                  <div class="counter-label">消费与心情的关系</div>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="card-header-actions">
                  <ul class="nav nav-pills nav-pills-rounded product-filters">
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" id="dayConsumeMood">日</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" id="weekConsumeMood">周</a>
                    </li>
                    <li class="nav-item">
                      <a class="active nav-link" data-toggle="tab" id="monthConsumeMood">月</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-12">
                <ul class="list-inline text-center mb-0">
                  <li class="list-inline-item">
                    <i class="icon wb-minus blue-500 mr-10" aria-hidden="true"></i> 消费
                  </li>
                  <li class="list-inline-item ml-35">
                    <i class="icon wb-minus green-500 mr-10" aria-hidden="true"></i> 心情
                  </li>
                </ul>
              </div>
            </div>
            <div class="ct-chart line-chart h-250"></div>
          </div>
        </div>
      </div>
      <div class="col-xxl-6 col-lg-12">
        <div class="card card-shadow card-responsive" id="sleepMoodLineChart">
          <div class="card-block p-30">
            <div class="row pb-30" style="height:calc(100% - 250px);">
              <div class="col-sm-8">
                <div class="counter counter-md text-left">
                  <div class="counter-label">睡眠与心情的关系</div>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="card-header-actions">
                  <ul class="nav nav-pills nav-pills-rounded product-filters">
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" id="daySleepMood">日</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" id="weekSleepMood">周</a>
                    </li>
                    <li class="nav-item">
                      <a class="active nav-link" data-toggle="tab" id="monthSleepMood">月</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-12">
                <ul class="list-inline text-center mb-0">
                  <li class="list-inline-item">
                    <i class="icon wb-minus blue-500 mr-10" aria-hidden="true"></i> 睡眠
                  </li>
                  <li class="list-inline-item ml-35">
                    <i class="icon wb-minus green-500 mr-10" aria-hidden="true"></i> 心情
                  </li>
                </ul>
              </div>
            </div>
            <div class="ct-chart line-chart h-250"></div>
          </div>
        </div>
      </div>
      <div class="col-xxl-6 col-lg-12">
        <div class="card card-shadow card-responsive" id="fitnessMoodLineChart">
          <div class="card-block p-30">
            <div class="row pb-30" style="height:calc(100% - 250px);">
              <div class="col-sm-8">
                <div class="counter counter-md text-left">
                  <div class="counter-label">健身与心情的关系</div>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="card-header-actions">
                  <ul class="nav nav-pills nav-pills-rounded product-filters">
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" id="dayFitnessMood">日</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" id="weekFitnessMood">周</a>
                    </li>
                    <li class="nav-item">
                      <a class="active nav-link" data-toggle="tab" id="monthFitnessMood">月</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-12">
                <ul class="list-inline text-center mb-0">
                  <li class="list-inline-item">
                    <i class="icon wb-minus blue-500 mr-10" aria-hidden="true"></i> 健身
                  </li>
                  <li class="list-inline-item ml-35">
                    <i class="icon wb-minus green-500 mr-10" aria-hidden="true"></i> 心情
                  </li>
                </ul>
              </div>
            </div>
            <div class="ct-chart line-chart h-250"></div>
          </div>
        </div>
      </div>
      <div class="col-xxl-6 col-lg-12">
        <div class="card card-shadow card-responsive" id="studyMoodLineChart">
          <div class="card-block p-30">
            <div class="row pb-30" style="height:calc(100% - 250px);">
              <div class="col-sm-8">
                <div class="counter counter-md text-left">
                  <div class="counter-label">学习与心情的关系</div>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="card-header-actions">
                  <ul class="nav nav-pills nav-pills-rounded product-filters">
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" id="dayStudyMood">日</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" id="weekStudyMood">周</a>
                    </li>
                    <li class="nav-item">
                      <a class="active nav-link" data-toggle="tab" id="monthStudyMood">月</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-12">
                <ul class="list-inline text-center mb-0">
                  <li class="list-inline-item">
                    <i class="icon wb-minus blue-500 mr-10" aria-hidden="true"></i> 学习
                  </li>
                  <li class="list-inline-item ml-35">
                    <i class="icon wb-minus green-500 mr-10" aria-hidden="true"></i> 心情
                  </li>
                </ul>
              </div>
            </div>
            <div class="ct-chart line-chart h-250"></div>
          </div>
        </div>
      </div>
      <div class="col-xxl-6 col-lg-12">
        <div class="card card-shadow card-responsive" id="workMoodLineChart">
          <div class="card-block p-30">
            <div class="row pb-30" style="height:calc(100% - 250px);">
              <div class="col-sm-8">
                <div class="counter counter-md text-left">
                  <div class="counter-label">工作与心情的关系</div>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="card-header-actions">
                  <ul class="nav nav-pills nav-pills-rounded product-filters">
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" id="dayWorkMood">日</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" id="weekWorkMood">周</a>
                    </li>
                    <li class="nav-item">
                      <a class="active nav-link" data-toggle="tab" id="monthWorkMood">月</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-12">
                <ul class="list-inline text-center mb-0">
                  <li class="list-inline-item">
                    <i class="icon wb-minus blue-500 mr-10" aria-hidden="true"></i> 工作
                  </li>
                  <li class="list-inline-item ml-35">
                    <i class="icon wb-minus green-500 mr-10" aria-hidden="true"></i> 心情
                  </li>
                </ul>
              </div>
            </div>
            <div class="ct-chart line-chart h-250"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Page -->
{% endblock %}
{% block scripts %}
<!-- Plugins -->
<script src="/templates/static/global/vendor/skycons/skycons.js"></script>
<script src="/templates/static/global/vendor/chartist/chartist.min.js"></script>
<script src="/templates/static/global/vendor/chartist-plugin-tooltip/chartist-plugin-tooltip.js"></script>
<script src="/templates/static/global/vendor/aspieprogress/jquery-asPieProgress.min.js"></script>
<script src="/templates/static/global/vendor/matchheight/jquery.matchHeight-min.js"></script>
<!-- Page -->
<script src="/templates/static/global/js/Plugin/matchheight.js"></script>
<script src="/templates/static/js/analysis.js"></script>
{% endblock %}